<template>
	<div>
		<div class="mt-10px">
			<el-table :data="tableData" style="width: 100%" class="history-trade-tables-current-table">
				<el-table-column prop="coin" label="币种" sortable>
					<template #default="scope">
						<div class="flex items-center">
							<p>
								<span>{{ scope.row.coin }}</span>
							</p>
							
							<el-icon class="w-16px h-16px ml-10px"><ArrowRight /></el-icon>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="account" label="总数量" sortable>
					<template #default="scope">
						<div class="text-12px pt-10px pb-10px">
							<span>{{ scope.row.account }}</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="useAccount" label="可用数量" sortable>
					<template #default="scope">
						<div class="text-12px pt-10px pb-10px">
							<span>{{ scope.row.useAccount }}</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="usdtAccount" label="USDT估值" sortable>
					<template #default="scope">
						<div class="text-12px pt-10px pb-10px">
							<span>{{ scope.row.usdtAccount }}</span>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>
<script lang="ts" setup>

const timeItem = ref<any[]>([
	"近1个月", "近3个月", "近1年"
]);

const selectedTimeItem = ref<any>("近1个月");
const inputTime = ref<any>([]);

const tableData = ref<any[]>([
	{
		coin: "BTC",
		account: '500.00',
		useAccount: '500.00',
		usdtAccount: '0.0000',
	},
	{
		coin: "BTC",
		account: '500.00',
		useAccount: '500.00',
		usdtAccount: '0.0000',
	},
	{
		coin: "BTC",
		account: '500.00',
		useAccount: '500.00',
		usdtAccount: '0.0000',
	}
	
])

const filterMethods = (value: string, row: any) => {
	return row.methods === value
}
const filterTo = (value: string, row: any) => {
	return row.to === value
}
const filterStatus = (value: string, row: any) => {
	return row.status === value
}
</script>
<style lang="scss" scoped>
.history-trade-tables-current-table {
	--el-bg-color: #121212;
	color: #fff;
	font-size: 12px;
	--el-table-header-text-color: #fff;
	--el-table-row-hover-bg-color: #181A20;
	--el-table-border-color: #202020;
	--el-table-border: 4px solid #202020;

	// --el-table-border-color:none;
	::v-deep .el-table__empty-block {
		background-color: #121212;
		color: #fff;
	}

	::v-deep .el-table__cell {
		padding: 0;
	}
}
</style>
<style lang="scss">
.history-tables-time-select {
	--el-input-bg-color: #121212;
	--el-input-border-color: #1A1A1A;
}

.filter-spot-tables {
	color: #fff;
	--el-border-color-light: #202020;

	.el-table-filter__list {
		padding: 0;
		background-color: #121212;
		border-color: #202020;

		.is-active {
			background-color: #121212;
			color: #114CEE;
		}
	}
}
</style>
